<template>
    <div>
        <div class="login_header">
            <div class="title">
                <i class="iconfont icon-daxueshidai- logo"></i>
                <p>运营角色</p>
            </div>
            <div class="content">
                <mt-button size="large" type="danger" @click.native="toLogin(4)">大配送员</mt-button>
                <mt-button size="large" type="danger" @click.native="toLogin(2)">装箱员</mt-button>
                <mt-button size="large" type="danger" @click.native="toLogin(1)">结算员</mt-button>
                <mt-button size="large" type="danger" @click.native="toLogin(3)">楼栋管理员</mt-button>
            </div>
        </div>
    </div>
</template>
<script>
import {Toast} from 'mint-ui'
import cookie from '../cookie'
export default {
    data() {
        return {
            
        }
    },
    methods:{
        toLogin(id){
            this.$router.push({path:'login',query:{id}})
        }
    }
}
</script>
<style scoped>
           .login_header{
        width: 100%;
        height:9rem;
        background-image: url('../assets/header_bg.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        color: #fff;
        text-align: center;
        font-size: 0.8rem;
    }
    .login_header::before{
        content: "";
        display: table;
    }
        .title{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.5rem;
        line-height: 8rem;
        font-weight: bolder;
    }
    .logo{
        font-size: 4rem;
        padding: 0 0.4rem;
        /* line-height: 8rem; */
    }
    .content{
        margin-top: 6rem;
        height: 20rem;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        align-items: center;
    }
    .content button{
        width: 60%;
        height: 4rem;
    }
</style>